import React from "react";
import {Redirect} from "react-router-dom";
import {Button, Checkbox, Col, Form, Icon, Input, Row} from 'antd';
import "@/assets/css/style.css";
import "./index.css";
import {connect} from "react-redux";
import {mapLogin} from "@/store/login/connect";

class Login extends React.Component{

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.handleLogin(values); // 拿到注入的事件， 进行请求
            }
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        const { from } = this.props.location.state || { from: { pathname: "/" } };
        let { loginData } = this.props;
        if (typeof loginData === 'object' && loginData.status === 1) {
            sessionStorage.setItem('isAuthenticated', true)
        }
        //判断是否登录
        let isAuthenticated = sessionStorage.getItem("isAuthenticated");
        if (isAuthenticated) {
            from.pathname = from.pathname === '/login' ? '/' :  from.pathname
            return <Redirect to={from} />;
        }
        return (
            <div className="login">
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请请输入用户名!' }],
                        })(
                            <Input
                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="用户名"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码!' }],
                        })(
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="密码"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item className='margin_bottom_0'>
                        <Row>
                            <Col span={12}>
                                {getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: false,
                                })(
                                    <Checkbox>记住密码</Checkbox>
                                )}
                            </Col>
                           <Col span={12} className="text_right">
                               <a className="login-form-forgot" >忘记密码</a>
                           </Col>
                        </Row>
                    </Form.Item>
                    <Form.Item>
                        <div className='errmsg ant-form-explain'>{typeof loginData === 'object' ? loginData.msg : ''}</div>
                        <Row>
                            <Col span={24}>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <a href="#">注册新账号</a>
                            </Col>
                        </Row>
                    </Form.Item>
                </Form>
            </div>
        );
    }

}


export default connect(mapLogin.mapStateToProps, mapLogin.mapDispatchToProps)(Form.create()(Login));
